<template>
  <div class="login-bg">
    <el-card class="login-card">
      <div class="login-title">系统登录</div>
      <el-form ref="ruleFormRef" class="login-form" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName" class="login-input" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" class="login-input" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
          <el-button class="reset-btn" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import https from '../http/AxiosHelper';
const router = useRouter();
interface RuleForm {
    userName: string
    pwd: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    userName: '',
    pwd: '',
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    pwd: [
        {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
        },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            https.get("api/User/LoginUser",{params:ruleForm}).then(res=>{
                if(res.data.code==200)
            {
                ElMessage.success(res.data.msg);
                localStorage.setItem("userId",res.data.data.userId);
                localStorage.setItem("roleId",res.data.data.roleId);
                localStorage.setItem("deionId",res.data.data.deionId);
                localStorage.setItem("userName",res.data.data.userName);
                localStorage.setItem("token",res.data.data.token)
                console.log(res.data.data.userId);
                
                router.push("/Main")
            }
            else
            {
                ElMessage.error(res.data.msg)
            }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
}
.login-card {
  width: 380px;
  padding: 40px 32px 24px 32px;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  background: #fff;
  border: none;
}
.login-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 32px;
  color: #409eff;
  letter-spacing: 2px;
}
.login-form {
  width: 100%;
}
.login-input {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  font-size: 1rem;
}
.login-btn {
  width: 100%;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background 0.3s;
}
.login-btn:hover {
  background: linear-gradient(90deg, #66b1ff 0%, #409eff 100%);
}
.reset-btn {
  width: 100%;
  border-radius: 8px;
  margin-top: 0;
}
@media (max-width: 500px) {
  .login-card {
    width: 95vw;
    padding: 24px 8px 16px 8px;
  }
  .login-title {
    font-size: 1.3rem;
  }
}
</style>
